<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" th:href="@{/layui-v2.4.5/layui/css/layui.css}" media="all">
</head>
<body>

	<!--页面主体
	<form class="layui-form">
		<div class="layui-form-item city" style="margin-bottom: -8px;">
			<label class="layui-form-label">所负责区域</label>
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
					<select id="uprovinceId" name="provinceId" lay-verify="required" lay-search="" lay-filter="uprovinceId">
						<option value="-1">请选择</option>
					</select>
				</div>
			</div>
			
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
					<select id="ucityId" name="cityId" lay-verify="required" lay-search="" lay-filter="ucityId" onchange="initDistrictList()">
						<option value="-1">请选择</option>
					</select>
				</div>
			</div>
			           
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 90px; margin-right: 0px; margin-bottom: 0px;">
					<select id="udistrictId" name="districtId" lay-verify="required" lay-search="">
						<option value="-1">请选择</option>
					</select>
				</div>
			</div>
		</div>
		
		<input type="hidden" th:value="${provinceId }" id="oldProvinceId" />
		<input type="hidden" th:value="${cityId }" id="oldCityId" />
		<input type="hidden" th:value="${countyId }" id="oldDistrictId" />
	</form>
	 -->
	
	<hr/>
	<h3>官网demo</h3>
	<br/><br/>
	
	<!-- 第二套联动 -->
	<form class="layui-form" action="">
		<div class="layui-form-item city">
			<label class="layui-form-label">联动选择框</label>
			<!-- 省份 -->
			<div class="layui-input-inline">
				<select id="uprovinceId" name="provinceId" lay-verify="required" lay-search="" lay-filter="uprovinceId">
					<!-- <option value="">请选择省</option> -->
				</select>
			</div>
			
			<!-- 市 -->
			<div class="layui-input-inline">
				<select id="ucityId" name="cityId" lay-verify="required" lay-search="" lay-filter="ucityId" onchange="initDistrictList()">
					<!-- <option value="">请选择市</option> -->
				</select>
			</div>
			
			<!-- 地区 -->
			<div class="layui-input-inline">
				<select id="udistrictId" name="districtId" lay-verify="required" lay-search="">
					<!-- <option value="">请选择县/区</option> -->
				</select>
			</div>
			
			<input type="hidden" th:value="${provinceId }" id="oldProvinceId" />
			<input type="hidden" th:value="${cityId }" id="oldCityId" />
			<input type="hidden" th:value="${countyId }" id="oldDistrictId" />
			
			<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互【已改，已联动】</div>
		</div>
		
		<hr/>
		
	</form>

</body>

<script th:src="@{/js/jquery/jquery-3.3.1.js}" charset="utf-8"></script>
<script th:src="@{/layui-v2.4.5/layui/layui.all.js}" charset="utf-8"></script>

<script type="text/javaScript">
	//  初始化省份列
	function initProvinceList(flag) {
		var provinceId = $("#oldProvinceId").val();
		$("#uprovinceId").append("<option value='" + -1 +"'>" + '请选择' + "</option>");
		$("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
		$("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
		
		console.log("provincePid为0，进入ajax后台查询");
		var url = "/address/findProvince";
		$.post(
				url, 
				{provincePid : 0}, 
				function(result) {
					var list = result.data;
					for (i = 0; i < list.length; i++) {
						var name = list[i].title;
						var id = list[i].id;
						if (id == provinceId) {
							$("#uprovinceId").append("<option value='" + id + "' selected>" + name + "</option>");
						} else {
							$("#uprovinceId").append("<option value='" + id + "'>" + name + "</option>");}
						}
					layui.use([ 'form' ], function() {
						var form = layui.form;
						form.render();
					});
				}
		);
	}	// initProvinceList() 结尾
		
	//  初始化城市列表
	function initCityList(flag) {
		var provinceId = $("#uprovinceId").val();
		var oldProvinceId = $("#oldProvinceId").val();
		
		if (provinceId == -1 && flag == "init") {
			provinceId = oldProvinceId;
		}
		var cityId = $("#oldCityId").val();
		$("#ucityId").empty();
		$("#ucityId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
		$("#udistrictId").empty();
		$("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
		
		if(provinceId != ""){
			console.log("cityPid不为空，进入ajax后台查询");
			var url = "/address/findCity";
			$.post(
					url, 
					{cityPid : provinceId}, 
					function(result) {
						var list = result.data;
						for (i = 0; i < list.length; i++) {
							var name = list[i].title;
							var id = list[i].id;
							if (id == cityId) {
								$("#ucityId").append("<option value='" + id + "' selected>" + name + "</option>");
							} else {
								$("#ucityId").append("<option value='" + id + "'>" + name + "</option>");
							}
						}
						
						layui.use([ 'form' ], function() {
							var form = layui.form;
							form.render();
						});
					}
			);
		}
	}	// initCityList() 结尾

	
	// 初始化区列表
	function initDistrictList(flag) {
		var cityId = $("#ucityId").val();
		var oldCityId = $("#oldCityId").val();
		
		if (cityId == -1 && flag == "init") {
			cityId = oldCityId;
		}

		var districtId = $("#oldDistrictId").val();
		$("#udistrictId").empty();
		$("#udistrictId").append("<option value='" + -1 + "'>" + '请选择' + "</option>");
		
		if(cityId != ""){
			console.log("countyPid不为空，进入ajax后台查询");
			var url = "/address/findCounty";
			$.post(
					url, 
					{countyPid : cityId}, 
					function(result) {
						var list = result.data;
						for (i = 0; i < list.length; i++) {
							var name = list[i].title;
							var id = list[i].id;
							if (id == districtId) {
								$("#udistrictId").append("<option value='" + id + "' selected>" + name + "</option>");
							} else {
								$("#udistrictId").append("<option value='" + id + "'>" + name + "</option>");
							}
						}
						
						layui.use([ 'form' ], function() {
							var form = layui.form;
							form.render();
						});
					}
			);
		}
	}	// initDistrictList() 结尾
	
	// 初始化地址列表
	$(function() {
		initProvinceList('init');
		initCityList('init');
		initDistrictList('init');
	});
	
	/*	这里面有个问题：选择的时候如果[请选择]的value是""空字符串，当选择从河北省变到请选择时不会触发这个监听事件	 */
	layui.use([ 'form', 'upload' ], function() {
		var form = layui.form;
		
		// 监听省份选择
		form.on('select(uprovinceId)', function(data) {
			initCityList('change');
		});
		
		// 监听城市选择
		form.on('select(ucityId)', function(data) {
			initDistrictList('change');
		});
		
		// 监听修改提交
		form.on('submit(update)', function(data) {
			// updateAccount();
			form.render();
			return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可
		});
	});
	
</script>

</html>
